<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
  ~ Copyright (c) 2017-2020 Contributors to the Eclipse Foundation
  ~
  ~ See the NOTICE file(s) distributed with this work for additional
  ~ information regarding copyright ownership.
  ~
  ~ This program and the accompanying materials are made available under the
  ~ terms of the Eclipse Public License 2.0 which is available at
  ~ http://www.eclipse.org/legal/epl-2.0, or the Apache Software License 2.0
  ~ which is available at https://www.apache.org/licenses/LICENSE-2.0.
  ~
  ~ SPDX-License-Identifier: EPL-2.0 OR Apache-2.0
  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
<div class="alert-box">
    <alert *ngIf="newVersionAvailable" [type]="'info'" [dismissible]="false">
        <i class="fa fa-info-circle"></i>
        <span>&nbsp;&nbsp;There is a new version available for this component!</span>
    </alert>

    <alert *ngIf="!editable" [type]="'warning'" [dismissible]="false">
        <i class="fa fa-ban"></i>
        <span>&nbsp;&nbsp;You cannot edit this version! To edit this component, add a new version.</span>
    </alert>
</div>
<div *ngIf="!(loadingVersions || loadingData); else loader"
     class="mainContentContainer {{ toscaComponent.toscaType | toscaTypeToCamelCase}}">
    <winery-instance-header
        [imageUrl]="imageUrl"
        [toscaComponent]="toscaComponent"
        [versions]="versions"
        [typeOf]="typeOf"
        [typeUrl]="typeUrl"
        [typeId]="typeId"
        [subMenu]="availableTabs"
        [toscaLightCompatibilityData]="toscaLightCompatibilityData"
        (deleteConfirmed)="deleteComponent();">
    </winery-instance-header>
    <div class="middle" id="ccontainer">
        <router-outlet></router-outlet>
    </div>
    <div class="bottom"></div>
</div>
<ng-template #loader>
    <winery-loader></winery-loader>
</ng-template>
